<script lang="ts" setup>
import { DatePicker, Overlay } from 'vant'
import moment from 'moment'

const props = defineProps<{
  current?: Date
  dateCb: (d?: Date) => void
}>()
const pickingDate = ref(true)

const d = computed(() => props.current ?? (new Date()))
const day = ref(moment(d.value).format('YYYY,MM,DD').split(','))

function confirm() {
  props.dateCb(new Date(day.value.join('-')))
  pickingDate.value = false
}

function cancel() {
  props.dateCb(undefined)
  pickingDate.value = false
}
</script>

<template>
  <Overlay
    :show="pickingDate"
    flex-cc :z-index="1001"
    @click="pickingDate = false"
  >
    <DatePicker
      v-model="day"
      title="选择日期"
      w="80%" of-hidden b-rd-3
      @click.stop
      @confirm="confirm"
      @cancel="cancel"
    />
  </Overlay>
</template>

<style scoped>

</style>
